<script lang="ts" setup>
  import { useToggle } from '@vueuse/shared';
  // 弹出框显示
  defineProps<{
    list?: { [xx: string]: any }[];
    title?: string;
    disabled?: boolean;
  }>();
  // 定义外部事件
  const emit = defineEmits(['change']);

  // 内部事件
  const onClickItem = (item: { [xx: string]: any }) => {
    emit('change', item);
    onToggleShow(false);
  };

  // 弹出框显示
  const [popupShow, onToggleShow] = useToggle(false);
</script>
<template>
  <div class="indicators">
    <div @click="() => !disabled && onToggleShow(true)">
      <slot></slot>
    </div>
    <VarPopup
      class="indicators-popup"
      :show="popupShow"
      position="center"
      @close="onToggleShow(false)"
      @click-overlay="onToggleShow(false)"
    >
      <div class="indicators-title">
        <p>{{ $t('Indicators') }}</p>
        <div class="close_icon" @click.stop="onToggleShow(false)">
          <img :src="$img('common/close.png')" />
        </div>
      </div>
      <div class="methods-list">
        <div
          class="list-item"
          v-for="(item, index) in list"
          :key="index"
          @click.stop="onClickItem(item)"
        >
          {{ item.label }}
        </div>
      </div>
    </VarPopup>
  </div>
</template>
<style lang="scss">
  .indicators {
    .indicators-popup {
      border-radius: 16px;
      padding: 30px 20px 60px;
      margin: 0 75px;
      .indicators-title {
        font-weight: bold;
        font-size: 36px;
        color: #000000;
        margin-bottom: 60px;
        @include center;
        .close_icon {
          width: 22px;
          height: 22px;
          position: absolute;
          top: 33px;
          right: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .methods-list {
        display: flex;
        flex-wrap: wrap;
        .list-item {
          width: 160px;
          height: 78px;
          background: #f8f8f8;
          border-radius: 8px;
          margin: 10px;
          @include center;
          &.active {
            background: #4CA335;
            color: #ffffff;
          }
        }
      }
    }
  }
</style>
